<template>
	<view class="i-pay-type container">
		<view class="order_title">
			<view class="amount">
				￥{{amount}}
			</view>
			
			
		</view>
		<radio-group @change="change">
			<label @click="itemClick(index)"
			 :style="{'borderColor': borderColor}" 
			class="i-pay-item" v-for="(item,index) in datas" :key="index">
				<view class="i-pay-item-left">
					<image :src="item.img" mode="aspectFill"></image>
					<text :style="{'font-size':fontSize+'rpx'}">{{item.name}}</text>
				</view>
				<view class="i-pay-item-right">
					<radio color='#fff555' @checked :value="index.toString()" />
				</view>
			</label>
		</radio-group>
	<view class="button-container">
		<button @tap="toPay">提交订单</button>
	</view>

	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				datas:[{
						name: '微信',
						id: 'wxpay',
						loading: false,
						img: '../../static/pay/wechat.png'
					},
					{
					name: '支付宝',
					id: 'alipay',
					loading: false,
					img: '../../static/pay/alipay.png',
				},
				{
					name: '银行卡',
					id: 'bancard',
					loading: false,
					img: '../../static/pay/bankcard.png'
				}],
				fontSize:34,
				borderColor:'#999999',
				orderId:null,
				payMethod:0,
				amount:0
				
			}
		},
		onLoad(options) {
			// console.log(options)
			this.orderId = options.id
			this.amount = options.amount

		
		},
		methods: {
			change(e) {
				let index= parseInt(e.detail.value)
				// this.$emit("change",index, this.datas[index]);
				this.payMethod=index
				// console.log(this.payMethod)
			},
			itemClick(e) {
				// this.$emit("itemClick", e, this.datas[e]);
			},
			toPay(){
				// this.$https({
				// 	url: '/order/pay',
				// 	method: "post",
				// 	data: {
				// 		id: this.orderId,
				// 		payMethod: this.payMethod
				// 	},
				// 	success:(res)=>{
						
				// 	}
				// )}
				this.$https({
					url:'/order/pay',
					method: "post",
					data:{
						id:this.orderId,
						payMethod: this.payMethod
					},
					success:(res)=>{
						uni.showToast({
							title:"支付成功",
							image:'../static/pay/paysuccess.png',
							duration: 4000,
							success() {
								uni.redirectTo({
									url:"/packageB/pages/userOrderList/index"
								})
								
							}
						})
					}
				})
			}
			

		}
	}
</script>

<style lang="scss">
	.container {
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: center;
	  
	  height: 100vh;
	  
	  padding: 20rpx;
	  
	  .button-container {
		color: #fff555;
	    order: 999;
		
		button {
			background-color: #fff555;
			border-radius: 30px;
			
		}
	  }
	}

	.i-pay-type {
		background-color: white;
		.i-pay-item,
		.i-pay-item .i-pay-item-right,
		.i-pay-item .i-pay-item-left {
			display: flex;
			align-items: center;
		}

		.i-pay-item {
			background-color: white;
			box-sizing: border-box;
			justify-content: space-between;
			width: 100%;
			height: 80rpx;
			// border: #999999 0.5px solid;
			// border-radius: 50rpx;
			margin-bottom: 20rpx;

			.i-pay-item-right {}

			.i-pay-item-left {
				padding-left: 5rpx;

				image {
					width: 70rpx;
					height: 70rpx;
				}

				text {
					padding-left: 20rpx;
					font-size: 34rpx;
				}
			}

		}
	}
	.amount{
		text-align: center;
		font-size: 20px;
	}
</style>
